<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ登录</title>
    <style>
        .big-box{
            width: 500px;
            height: 800px;
            border: 1px solid black;
            background-image: url("../img/微信截图_20230717141409.png");

        }
        .top-txt{
            font-size: 80px;
            position: absolute;
            top: 30px;
            left: 130px;

        }
        img{
            margin-top: 30px;
            width: 130px;
            height: 100px;
        }
        #ipt_txt{
            width: 300px;
            height: 42px;
            padding: 0 0 20px 50px;
            background-color: #FFCC0000;
            font-weight: bold;
            font-size: 30px;
        }
        #ipt-txt{
            width: 300px;
            height: 42px;
            background-color: #FFCC0000;
            padding: 0 0 20px 50px;
            font-weight: bold;
            color: #222222;
            font-size: 30px;
        }
        #ipt_btn {
            width: 300px;
            height: 42px;
            background-color: #0800d9;
            color: #ffffff;
            margin: 20px 0  0;

        }
        .fo{
            margin: 200px 80px;

        }
    </style>
</head>
<body>
<div class="big-box">
    <img src="../img/QQ.png" alt="">
    <div class="top-txt"><b>QQ</b></div>
    <div class="fo">
        <from >
            <div class="input-dl">
                <input type="text" placeholder="账号" id="ipt-txt" >
            </div>
            <div class="input-dl">
                <input type="password" placeholder="登录密码" id="ipt_txt">
            </div>
            <input type="checkbox" value="记住密码" name="forget" id="fore">
            <label for="fore">记住密码</label>
            <div class="dl-on-button">
                <div class="input-dl">
                    <input type="button" value="登录" id="ipt_btn">
                </div>
            </div>

        </from>
    </div>
</div>
</body>
</html>